<template>
    <el-affix
        style=" width: 100%; height: 0"
        :offset="0"
        @scroll="onScroll"
    >
        <header
            class="h-[60px]"
            :style="{
                backgroundColor: hexToRgba(itemConfig.bgColor, percent)
            }"
        >
            <div class="max-w-[1200px] m-auto px-5 h-full flex items-center">
                <div
                    v-if="itemConfig.logoImage"
                    class="flex items-center w-[100px] h-full mr-[50px]"
                >
                    <el-image
                        :src="appStore.toAbsoluteUrl(itemConfig.logoImage)"
                        :lazy="true"
                        alt="logo"
                        class="max-w-full max-h-full"
                    />
                </div>

                <div class="flex flex-1 items-center gap-8">
                    <template v-for="(item, index) in (itemData as itemDataType[])">
                        <nuxt-link
                            v-if="item.isEnable"
                            :key="index"
                            class="cursor-pointer text-lg hover:opacity-80"
                            :style="{ color: itemConfig.fontsColor }"
                            @click="handleJump(item)"
                        >
                            {{ item.name }}
                        </nuxt-link>
                    </template>
                </div>

                <div
                    v-if="itemConfig.loginBtnShow"
                    class="flex items-center gap-2"
                >
                    <el-button
                        v-if="!userStore.isLogin"
                        type="primary"
                        class="hover:opacity-80"
                        :style="{ color: itemConfig.fontsColor }"
                        link
                        @click="appStore.setPopup(popupEnum.LOGIN)"
                    >
                        {{ itemConfig.loginBtnName }}
                    </el-button>

                    <el-button
                        v-else
                        type="primary"
                        class="hover:opacity-80"
                        :style="{ color: itemConfig.fontsColor }"
                        link
                        @click="router.push('/chats')"
                    >
                        开始使用
                    </el-button>
                </div>
            </div>
        </header>
    </el-affix>
</template>

<script setup lang="ts">
import { popupEnum } from '~/enums/app'
import useAppStore from '~/stores/app'
import useUserStore from '~/stores/user'
import validateUtil from '~/utils/validate'

interface itemConfigType {
    logoImage: string;
    loginBtnShow: boolean;
    loginBtnName: string;
    fontsColor: string;
    bgColor: string;
}

interface itemDataType {
    name: string;
    isLogin: boolean;
    isEnable: boolean;
    link: any;
}

withDefaults(
    defineProps<{
        itemConfig?: itemConfigType,
        itemData?: itemDataType[]
    }>(),
    {
        itemConfig: {} as itemConfigType | any,
        itemData: [] as itemDataType[] | any
    }
)

const router = useRouter()
const appStore = useAppStore()
const userStore = useUserStore()
const percent = ref<number>(0)

/**
 * 跳转方法
 *
 * @param {itemDataType} item
 * @author zero
 */
const handleJump = (item: itemDataType) => {
    if (!userStore.isLogin && item.isLogin) {
        return appStore.setPopup(popupEnum.LOGIN)
    }

    if (item.link?.path) {
        if (validateUtil.isExternal(item.link?.path)) {
            window.open(item.link?.path, '_blank')
        } else {
            router.push({
                path: item.link?.path,
                query: item.link?.query
            })
        }
    }
}

/**
 * 滚动监听
 *
 * @param {number} param0
 * @author zero
 */
const onScroll = ({ scrollTop }: { scrollTop: number }) => {
    const top = 80
    percent.value = scrollTop / top > 0.8 ? 0.8 : scrollTop / top
}

/**
 * 十六进制转RGB
 *
 * @param {string} hex
 * @param {number} alpha
 * @author zero
 */
const hexToRgba = (hex: string, alpha: number) => {
    hex = hex.replace(/^#/, '')
    if (hex.length === 3) {
        hex = hex.split('').map(x => x + x).join('')
    }

    const r = parseInt(hex.slice(0, 2), 16)
    const g = parseInt(hex.slice(2, 4), 16)
    const b = parseInt(hex.slice(4, 6), 16)
    return `rgba(${r}, ${g}, ${b}, ${alpha})`
}
</script>
